<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <!--        1 学生 2 职工-->
        <span>问卷报告</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <el-row v-if="infoForm">
          <el-col :span="24" class="warp-main">
            <el-form ref="infoForm" :model="infoForm" label-width="140px">
              <el-form-item label="问卷标题:">
                <p>{{ infoForm.title }}</p>
              </el-form-item>
              <el-form-item label="问卷描述:" prop="description">
                <p v-html="infoForm.description?infoForm.description:'无'"></p>
              </el-form-item>
              <el-form-item label="问卷范围:">
                <div>
                  <div v-if="infoForm.user_ids">
                    <el-tag
                        :key="index"
                        v-for="(tag,index) in editBody.user_ids"
                        class="mr-10"
                    >{{ tag.realname }}
                    </el-tag>
                  </div>
                  <div v-else>全校职工</div>
                </div>
              </el-form-item>
              <el-form-item label="问卷开始时间:" prop="end_time">
                <p>{{ infoForm.start_time }}</p>
              </el-form-item>
              <el-form-item label="问卷结束时间:" prop="end_time">
                <p>{{ infoForm.end_time }}</p>
              </el-form-item>
              <el-form-item label="问卷内容:">
                <div>
                  <el-button @click="gotoExcel()" class="mb-10" size="mini">导出题目内容excel明细</el-button>
                  <div v-for="(items,index) in listCheck">
                    {{ index + 1 }}.{{ items.content }}
                    <el-button v-if="showLine" @click="gotoOptionList(items)" class="mb-10" size="mini">明细查看</el-button>
                    <div v-if="items.type!==3">
                      <div v-for="(line,indexs) in items.option" class="inlinebox">
                        <p>
                          {{ line.index }}.{{ line.text }}
                          <span>({{ line.number }}票)</span>
                          <span v-if="line.type==1">(可输入自定义文字)</span>
                        </p>
                        <p v-if="line.type==1" class="showuserAnswer">
                          用户提交项：
                          <span v-for="useroption in line.content">（{{ useroption }}）</span>
                        </p>
                      </div>
                    </div>
                    <div class="inlinebox" v-else>
                      <p>用户自行填写</p>
                      <p class="showuserAnswer">用户提交项：<span v-for="useroption in items.option">（{{ useroption }}）</span>
                      </p>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">确定</el-button>
      </div>
      <questionOptionList :visible.sync="optionVisible" :optionId="optionId"></questionOptionList>
    </div>
  </div>
</template>

<script>
import questionOptionList from "./questionOptionList";
import {mapGetters} from "vuex";

export default {
  props: ['visible', 'detailId'], // commoent 学生点评 collection 学生采集
  components: {
    questionOptionList
  },
  data() {
    return {
      dialogVisible: false,
      qustionCheck: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      dialogTableVisible: false,
      infoForm: null,
      arryList: null,
      usersName: null,
      editId: this.$route.query.editId,
      listCheck: [],
      value1: [],
      sectionList: [],
      classesList: [],
      oldClass: {}, // 未处理的班级
      oldsection: {}, // 未处理的年段
      editClass_id: [],
      editsection_id: [],
      studentVisible: false,
      teachertype: 0,
      editBody: null,
      optionId: 0,
      optionVisible: false,
      showLine: false
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible && this.detailId) {
        console.log('用户的身份：', this.userInfo)
        this.showLine = this.userInfo.id===2?true:false
        this.Inint()
      }
    }
  },
  created() {
  },
  methods: {
    gotoOptionList(item) {
      this.optionId = item.id
      this.optionVisible = true
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    Inint() {
      this.$fetch(this.api.questionnaire_inside_detail, {id: this.detailId}).then((response) => {
        if (response.code === 0) {
          this.infoForm = response.vo
          this.listCheck = response.list
          // 0全校 1特定年段 2特定班级
          if (Number(response.vo.type) === 1) {
            this.editsection_id = response.vo.section_id
          } else if (Number(response.vo.type) === 2) {
            this.editClass_id = response.vo.class_id
          }
          this.editBody = response.vo
          this.detailCheckFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    detailCheckFn() {
      for (let i in this.listCheck) {
        let option = this.listCheck[i]
        // type 1 单选项 2 多选项 3 输入框
        this.$fetch(this.api.questionnaire_inside_option, {id: this.listCheck[i].id}).then((response) => {
          if (response.code === 0) {
            for (let j in response.list) {
              // type  1 是 2 否
              if (this.listCheck[i].type !== 3) {
                option.option[j].number = response.list[j].number
                if (Number(option.option[j].type) === 1) {
                  option.option[j].content = response.list[j].content
                }
              } else {
                option.option = response.list[j].content
              }
            }
            this.$set(this.listCheck, i, option)
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    chooseStudent() {
      console.log('idname:', this.infoForm.section_id, this.infoForm.class_id)
      this.studentVisible = true
    },
    handleClose(index) {
      this.dynamicTags.splice(index, 1)
      delete this.dynamicTagsArray[this.dynamicTagsId[index]] // 去除选中的人
      this.dynamicTagsId.splice(index, 1)
      this.infoForm.user_ids = this.dynamicTagsId.join(',')
    },
    gotoExcel(index) {
      this.$http({
        method: 'get',
        url: `${this.$BASE_URL}/admin/${this.api.inside.export_index}?id=${this.detailId}`,
        responseType: 'arraybuffer'
      })
          .then(
              function (response) {
                this.fileDownload(response.data, this.infoForm.title)
              }.bind(this)
          )
          .catch(
              function (error) {
                alert('网络请求出错')
              }
          )
    },
    fileDownload(data, pushname) {
      let blob = new Blob([data], {
        type: 'application/octet-stream'
      })
      let filename = pushname + '-填写明细.xls' || 'filename.xls'
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(blob, filename)
      } else {
        let blobURL = window.URL.createObjectURL(blob)
        let tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = blobURL
        tempLink.setAttribute('download', filename)
        if (typeof tempLink.download === 'undefined') {
          tempLink.setAttribute('target', '_blank')
        }
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        window.URL.revokeObjectURL(blobURL)
      }
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 70%;
  height: 80%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px 20px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.toolbarLine {
  text-align: center;
}

.hearder-search {
  display: flex;
  align-items: center;
}
</style>


